<template>
  <div class="main">
    <Canvas class="canvas" :canvasSizeStatus="canvasSizeStatus"></Canvas>
    <Visual 
    :canvasSizeStatus="canvasSizeStatus"
    v-on:set-canvas-size-status="setCanvasSizeStatus"></Visual>
    <LoadSheetBox 
    :canvasSizeStatus="canvasSizeStatus" 
    v-on:set-canvas-size-status="setCanvasSizeStatus"
    class="load-sheet-box"></LoadSheetBox>
  </div>
</template>

<script>
import Canvas from "@/components/Canvas.vue";
import LoadSheetBox from "@/components/LoadSheetBox.vue";
import Visual from "@/components/Visual.vue";
export default {
  components: {
    Canvas,
    LoadSheetBox,
    Visual,
  },
  data() {
    return {
      canvasSizeStatus: 0,
    };
  },
  methods: {
    setCanvasSizeStatus(val){
      this.canvasSizeStatus = val
    }
  },
};
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-around;

  height: 100%;
}

.canvas {
  /* width: 76%; */
  flex:1;
}

.visual, .load-sheet-box {
  height: 92vh;
}

.load-sheet-box {
  /* width: 12%; */
}
</style>